<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>编辑店铺</p>
		</header>

		<!-- 表单部分 -->
		<div class="form-container">
			<form @submit.prevent="submitForm">
				<div class="form-group">
					<label>店铺名称</label>
					<input type="text" v-model="formData.businessName" required placeholder="请输入店铺名称">
				</div>

				<div class="form-group">
					<label>店铺图片</label>
					<input type="text" v-model="formData.businessImg" placeholder="请输入图片URL">
				</div>

				<div class="form-group">
					<label>店铺地址</label>
					<input type="text" v-model="formData.businessAddress" placeholder="请输入店铺地址">
				</div>

				<div class="form-group">
					<label>店铺描述</label>
					<textarea v-model="formData.businessExplain" placeholder="请输入店铺描述"></textarea>
				</div>

				<div class="form-group">
					<label>起送价</label>
					<input type="number" v-model.number="formData.startPrice" required placeholder="请输入起送价">
				</div>

				<div class="form-group">
					<label>配送费</label>
					<input type="number" v-model.number="formData.deliveryPrice" required placeholder="请输入配送费">
				</div>

				<div class="form-group">
					<label>店铺类型</label>
					<select v-model="formData.orderTypeId" required>
						<option value="">请选择店铺类型</option>
						<option value="1">美食</option>
						<option value="2">早餐</option>
						<option value="3">跑腿代购</option>
						<option value="4">汉堡披萨</option>
						<option value="5">甜品饮品</option>
						<option value="6">速食简餐</option>
						<option value="7">地方小吃</option>
						<option value="8">米粉面馆</option>
						<option value="9">包子粥铺</option>
						<option value="10">炸鸡炸串</option>
					</select>
				</div>



				<div class="form-actions">
					<button type="button" class="cancel-btn" @click="cancel">取消</button>
					<button type="submit" class="submit-btn">保存</button>
				</div>
			</form>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';

	export default {
		name: 'EditStore',
		data() {
			return {
				storeId: this.$route.query.storeId,
				formData: {
					businessName: '',
					businessImg: '',
					businessAddress: '',
					businessExplain: '',
					startPrice: 0,
					deliveryPrice: 0,
					orderTypeId: '',
				}
			};
		},
		created() {
			const token = localStorage.getItem('id_token');
			if (!token) {
				this.$router.push('/login');
				return;
			}
			this.getStoreInfo();
		},
		components: {
			Footer
		},
		methods: {
			getStoreInfo() {
				const token = localStorage.getItem('id_token');
				this.$axios.get(`businesses/${this.storeId}`, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						this.formData = result.data;
					} else {
						alert('获取店铺信息失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('获取店铺信息出错：', error);
				});
			},

			submitForm() {
				const token = localStorage.getItem('id_token');
				this.$axios.put(`businesses/${this.storeId}`, this.formData, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				}).then(response => {
					const result = response.data;
					if (result.success && result.code === 200) {
						alert('店铺更新成功');
						this.$router.push('/storeManagement');
					} else {
						alert('更新失败：' + (result.message || '未知错误'));
					}
				}).catch(error => {
					console.error('更新店铺出错：', error);
				});
			},

			cancel() {
				this.$router.go(-1);
			}
		}
	};
</script>

<style scoped>
	/* 样式与AddStore.vue相同 */
	.wrapper {
		width: 100%;
		min-height: 100%;
		background-color: #f5f5f5;
		padding-bottom: 14vw;
	}

	header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.form-container {
		padding: 3vw;
		margin-top: 15vw;
	}

	.form-group {
		margin-bottom: 4vw;
		background-color: #fff;
		padding: 3vw;
		border-radius: 1.5vw;
	}

	.form-group label {
		display: block;
		font-size: 3.5vw;
		color: #333;
		margin-bottom: 2vw;
	}

	.form-group input,
	.form-group textarea,
	.form-group select {
		width: 100%;
		padding: 3vw;
		font-size: 3.5vw;
		border: 1px solid #ddd;
		border-radius: 1vw;
		box-sizing: border-box;
	}

	.form-group textarea {
		min-height: 15vw;
		resize: vertical;
	}

	.form-actions {
		display: flex;
		justify-content: space-around;
		margin-top: 6vw;
	}

	.form-actions button {
		width: 40vw;
		height: 12vw;
		font-size: 4vw;
		border: none;
		border-radius: 1.5vw;
		cursor: pointer;
	}

	.cancel-btn {
		background-color: #eee;
		color: #666;
	}

	.submit-btn {
		background-color: #0097EF;
		color: #fff;
	}
</style>